<template>
  <div class="content-container">
    <el-scrollbar v-if="state.mounted">
      <ProcessRender
        :style="`transform: scale(${zoom / 100})`"
        v-model="state.flowDef"
        :flow-inst-id="props.flowInstId"
        :readonly="true"
      />
    </el-scrollbar>
  </div>
</template>

<script setup lang="ts" name="FlowPhotoView">
import { useMessage } from "@/hooks/message";
import { getObj } from "@/api/flow/def";
import ProcessRender from "@/views/design/process/ProcessRender.vue";

const props = defineProps({
  defFlowId: {
    type: String,
    default: null
  },
  flowInstId: {
    type: String,
    default: null
  }
});

const zoom = ref(90);
const state = reactive({
  mounted: false,
  flowDef: []
});

onMounted(() => {
  if (props.defFlowId) {
    getObj(props.defFlowId).then(async res => {
      if (res && res.code === 200) {
        if (res.data.flowDefJson) {
          nextTick(() => {
            state.mounted = true;
            state.flowDef.push(...res.data.flowDefJson);
          });
        } else {
          nextTick(() => {
            state.mounted = false;
          });
          useMessage().error("流程配置解析失败");
        }
      } else {
        nextTick(() => {
          state.mounted = false;
        });
        useMessage().error("流程未配置");
      }
    });
  }
});
</script>

<style lang="scss">
@use "@/assets/style/design/flow-designer.scss";
.content-container {
  height: calc(100vh - 150px);
  overflow-y: auto;
}
</style>
